<template>
    <div class="flex flex-col bg-white"
        :class="[focusChart === name ? 'fixed top-0 left-0 right-0 bottom-0 w-screen h-screen z-30' : '', bodyClass]">
        <div v-if="focusChart === name" class="flex">
            <el-button link :icon="Back" @click="$emit('toggleFocus', '')">返回</el-button>
            <span class="flex-1 font-bold h-10 flex justify-center items-center"></span>
        </div>
        <div :id="name" @dblclick="$emit('toggleFocus', name)" :ref="getDomRef(name)" class="flex-1 w-full h-full" />
    </div>
</template>
<script setup>
import { Back } from '@element-plus/icons-vue';
defineProps(['name', 'title', 'bodyClass', 'focusChart', 'getDomRef'])
</script>